@import "../../common/common";


.search_modal {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: #fff;
  transform: translateY(100%);
  transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);

  .search_box{
    padding:  $_12 $_20;
    width: 100%;
    display: flex;


    .search_input{
      background: #ececec;
      height: $_60;
      width: $_600;
      border-radius: $_8;
      display: flex;


      input{
        width: $_520;
        height: 100%;
        padding: 0 $_16;
        background: transparent;
      }

      .search_enter{
        height: 100%;
        width: $_80;
        background-image: url("../images/sreach-ico.png");
        background-size: auto 70%;
        background-repeat: no-repeat;
        background-position: center center;

      }
    }

    .back{
      height: $_60;
      width: $_50;
      position: relative;
      margin-right: $_20;
    }

    .back:before{
      content: "";
      position: absolute;
      height: $_36;
      width: 2px;
      background: #ccc;
      transform: rotate(45deg);
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
    .back:after{
      content: "";
      position: absolute;
      height: $_36;
      width: 2px;
      background: #ccc;
      transform: rotate(-45deg);
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }



  }

}


.search_modal.show{
  transform: translateY(0) !important;
}